import styled from 'styled-components'
import { useNavigate } from 'react-router-dom'
import { useStore } from '../store'

const Wrapper = styled.div<any>`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.5rem;

  & input {
    padding: .6rem;
  }

  & button {
    font-size: 1.8rem;
  }
`

export default function Page () {
  const navigate = useNavigate();
  const { title, due } = useStore((state:any) => state.todoItem)
  const setDueDate = useStore((state:any) => state.setDueDate)
  const pushItem2List = useStore((state:any) => state.pushItem2List)

  const onChange = (e:any) => {
    setDueDate(e.target.value)
  }
  const onAdd = () => {
    pushItem2List()
    navigate('/notice')
  }
  return (
    <Wrapper>
      <h1>Step2 Page</h1>
      <h3>{title}</h3>
      <label htmlFor="">Title</label>
      <input type="date" value={due} onChange={onChange} />
      <button onClick={onAdd}>Add</button>
    </Wrapper>
  )
}
